
<!--
 * @Author: ljc
 * @Date: 2023-04-25 15:00:24
 * @LastEditors: g05047
 * @LastEditTime: 2023-06-08 20:09:48
 * @Description: 规则自动分配结果
-->
<template>
  <div>
    <rk-dialog width="80%"
      height="70%"
      title=""
      :visible="visible"
      :destroyOnClose="true"
      @close="visible = false"
      :maskClosable="true">
      <RkContainer :isFooter="false"
        :isAside=false
        :isHeader="false">
        <template #main>
          <RkCenter>
            <template #condition>
              <RkCenter-bar v-show="true">
                <template #content>
                  <el-form ref="form"
                    :inline="true">
                    <span>任务名称：{{ taskName }}</span>
                  </el-form>
                </template>
                <template #buttons>
                </template>
              </RkCenter-bar>
            </template>
            <template #content>
              <rk-grid ref="ruleEditTableRef"
                key="applyId"
                title="自动分配结果"
                dataUrl="/reviewtask/getGridPageByRule"
                seqConfig
                :params="queryParams"
                :columns="tableColumns"
                :pagerConfig='false'
                :keepSource="true">
                <template #toolbar_tools>
                  <el-input v-model="queryParams.keyWords"
                    placeholder="请输入一级条目/二级条目"
                    class="w-200px"
                    style="margin-right: 15px;"
                    clearable
                    @input="handleSearch">
                  </el-input>
                </template>
                <template #addOperation="{ row }">
                  <div class="operation-box">
                    <el-button class="button-new-tag ml-1"
                      size="small"
                      @click="handleAdd(row)">
                      添加
                    </el-button>
                  </div>
                </template>
                <template #expertOperation="{ row }">
                  <el-tag v-for="item in row.expertList"
                    :key="item.expertId"
                    class="expert-tag"
                    closable
                    :disable-transitions="false"
                    @close="handleRemove(item,row)">
                    {{ item.name }}
                  </el-tag>
                </template>
              </rk-grid>
            </template>
          </RkCenter>
        </template>
      </RkContainer>
      <template #footer>
        <el-button type="primary"
          @click="handleConfirm('分配')">保存</el-button>
        <el-button @click="hanldeClose()">取消</el-button>
      </template>
    </rk-dialog>
    <project-add-expert-dialog ref="projectAddExpertDialogViewRef"
      type="rule"
      @save="handleSave"></project-add-expert-dialog>
  </div>
</template>
  <script setup>
import { reactive, ref, } from 'vue';
import ProjectAddExpertDialog from './ProjectAddExpertDialog.vue'
import XEUtils from 'xe-utils';
import { EXPERT_SCORE_STATUS } from '@/enums/enums-expert.js'
import { useExpertsApi } from '@/api/index'
const { saveAssignExperts } = useExpertsApi();

const emit = defineEmits(['save'])
const { appContext } = getCurrentInstance();
const globalProxy = appContext.config.globalProperties;
const ruleEditTableRef = ref('')
const projectAddExpertDialogViewRef = ref(null)
const taskName = ref(null)
// 查询参数
let queryParams = reactive({
  taskId: undefined,
  keyWords: undefined,
  applyIds: undefined,
  expertIds: undefined,
  type: 0,
})
let seleRowModel = {}
const visible = ref(false)
const tableColumns = ref([
  { field: 'entryLev1', title: '一级条目', width: 120, align: 'center', },
  { field: 'entryLev2', title: '二级条目', width: 350, align: 'left', },
  { field: 'reviewDesc', title: '评审内容', width: 700, align: 'left', },
  {
    field: 'scoreType', title: '评分选项', width: 100, align: 'center', slots: {
      default: ({ row }) => {
        return row.scoreType ? EXPERT_SCORE_STATUS.options[row.scoreType].label : ""
      }
    }
  },
  { field: 'reviewStandard', title: '评审标准', width: 120, align: 'center', },
  { field: 'applyType', title: '分配类型', width: 120, align: 'center', fixed: 'right' },
  {
    field: 'expertList', title: '已分配评审专家', align: 'left', width: 400, fixed: 'right', showOverflow: false, slots: { default: 'expertOperation' }, className: 'allot-expert'
  },
  {
    field: 'addOpreation', title: '操作', width: 80, align: 'left', fixed: 'right', slots: { default: 'addOperation' }
  },
])
/** 删除 */
const handleRemove = (item, row) => {
  row.expertList.splice(row.expertList.indexOf(item), 1)
}
/** 添加 */
const handleAdd = (row) => {
  let params = {}
  const seleRow = row
  seleRowModel = seleRow
  let expertIds = undefined
  let expertArray = []
  seleRow.expertList.forEach((item) => {
    expertArray.push(item.expertId)
  })
  expertIds = expertArray.join(',')
  params = {
    taskId: queryParams.taskId,
    applyIds: seleRow.applyId,
    expertIds: expertIds,
    ruleId: seleRow.ruleId
  }
  projectAddExpertDialogViewRef.value.handleOpen(params)
}
/** 保存回调 */
const handleSave = (models) => {
  let array = seleRowModel.expertList
  const expertArray = XEUtils.clone(models, true)
  array = [...array, ...expertArray]
  seleRowModel.expertList = array
  ruleEditTableRef.value.reloadRow(seleRowModel)
}
/** 查询 */
const handleSearch = () => {
  ruleEditTableRef.value.searchEvent()
}
/** 打开弹出层 */
const handleOpen = (params) => {
  const { taskName: name } = params
  visible.value = true
  taskName.value = name
  queryParams = {
    ...params
  }
}
/** 关闭弹窗 */
const hanldeClose = () => {
  visible.value = false
}
/** 确认提交 */
const handleConfirm = async (textName) => {
  const { tableData } = ruleEditTableRef.value.getTableData()
  const { applyIds } = queryParams
  let model = {}
  model.applyIds = applyIds
  model.taskId = queryParams.taskId
  let ruleList = []
  for (let index = 0; index < tableData.length; index++) {
    const element = tableData[index];
    let subModel = {}
    let expertList = []
    if (element.expertList.length > 0) {
      element.expertList.forEach((item) => {
        let expertModel = {}
        expertModel.expertId = item.expertId
        expertModel.name = item.name
        expertList.push(expertModel)
      })
      subModel.ruleId = element.ruleId
      subModel.scoreType = element.scoreType
      subModel.expertList = expertList
      ruleList.push(subModel)
    } else {
      globalProxy.$message({ message: `请检查分配专家是否为空！`, type: "warning" });
      return
    }
  }
  model.ruleList = ruleList
  visible.value = false
  const params = model
  const result = await saveAssignExperts(params)
  const { data, code, msg } = result
  if (code === 200) {
    emit('save', data)
  } else {
    globalProxy.$message({ message: `${msg}`, type: "error" });
  }
}
// 对外暴露方法
defineExpose({
  handleOpen,
})

  </script>
<style lang="scss" scoped>
.operation-box {
  display: flex;
  justify-content: space-around;
}
:deep(.allot-expert) {
  line-height: 30px;
}
.expert-tag {
  margin-right: 5px;
}
.w-200px {
  width: 200px;
}
</style>
      